<div class="summary-email">
  <span class="preheader" style="display:none!important;color:#f3f3f3;font-size:1px;line-height:1px;max-height:0;max-width:0;mso-hide:all!important;opacity:0;overflow:hidden;visibility:hidden">
    <%= @preheader_text %>
  </span>
  <table border="0" cellspacing="0" width="100%">
    <tr>
      <td>
        <%- if I18n.t('user_notifications.digest.custom.html.header').present? %>
          <table width="100%" class="digest-header logo-header" dir="<%= rtl? ? 'rtl' : 'ltr' %>" style="border-spacing:0;padding:0;">
            <tr>
              <td></td>
              <td width="650" style="padding:0;">
                <%= raw(t 'user_notifications.digest.custom.html.header') %>
              </td>
              <td></td>
            </tr>
          </table>
        <%- else %>
          <table width="100%" class="digest-header text-header with-dir" style="background-color:#<%= @header_bgcolor -%>;">
            <tr>
              <td></td>
              <td width="650" align="center" style="text-align: center;padding: 20px 0; font-family:Arial,sans-serif;">
                <a href="<%= Discourse.base_url %>" style="color:#<%= @header_color -%>;font-size:22px;text-decoration:none;">
                <%- if logo_url.blank? %>
                  <%= SiteSetting.title %>
                <%- else %>
                  <img src="<%= logo_url %>" height="40" style="clear:both;display:block;height:40px;margin:auto;max-width:100%;outline:0;text-decoration:none;" alt="<%= SiteSetting.title %>">
                <%- end %>
                </a>
              </td>
              <td></td>
            </tr>
          </table>
        <%- end %>
        <table width="100%" class="body digest-content with-dir" style="background:#f3f3f3;padding:0;border-spacing:0;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;vertical-align:top;">
          <tr>
            <td class="side-spacer" style="vertical-align:top;padding:0;">
              <div class="with-accent-colors">
                <table class="spacer with-accent-colors" style="border-spacing:0;padding:0;width:100%">
                  <tbody>
                    <tr>
                      <td height="400px" style="height:400px;border-collapse:collapse!important;margin:0;mso-line-height-rule:exactly;padding:0;">&nbsp;</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </td>
            <td  width="650" style="vertical-align:top;padding:0;font-family:Arial,sans-serif;">
              <table align="center" class="digest-content-header with-accent-colors with-dir" style="border-spacing:0;margin:0;padding:0;vertical-align:top;width:100%">
                <tbody>
                  <tr>
                    <td style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:0;vertical-align:top;word-wrap:normal">
                      <br/>
                      <center class="header-since-last-visit with-accent-colors" style="font-size:22px;font-weight:400;mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.since_last_visit' %></center>
                      <table class="header-stats with-dir" style="table-layout:fixed;margin:10px 0 20px 0;padding:0;vertical-align:top;width:100%;min-width:100%;">
                        <tbody>
                          <tr class="header-stat-count">
                            <%- @counts.each do |count| -%>
                              <td id="<%= count[:id] %>_stat_count" style="text-align:center;font-size:36px;font-weight:400;">
                                <a class="with-accent-colors" href="<%= count[:href] -%>"><strong><%= count[:value] -%></strong></a>
                              </td>
                            <%- end -%>
                          </tr>
                          <tr class="header-stat-description">
                            <%- @counts.each do |count| -%>
                              <td id="<%= count[:id] %>_stat_description" style="font-size:14px;font-weight:400;text-align:center;">
                                <a class="with-accent-colors" href="<%= count[:href] -%>"><strong><%=t count[:label_key] -%></strong></a>
                              </td>
                            <%- end -%>
                          </tr>
                        </tbody>
                      </table>
                      <center class="header-popular-topics with-accent-colors" style="font-size:22px;font-weight:400;margin-bottom: 8px; mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.popular_topics' %></center>
                    </td>
                  </tr>
                </tbody>
              </table>
              <table class="with-dir" align="center" style="border-spacing:0;background:#fefefe;margin:0;padding:0;text-align:center;vertical-align:top;width:100%">
                <tbody>
                  <tr>
                    <td class="digest-popular-topic-wrapper with-dir" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;hyphens:auto;line-height:1.3;margin:0;padding:0;vertical-align:top;word-wrap:normal">
                      <% @popular_topics.each_with_index do |t, i| %>
                        <!--   Beginning of Popular Topic   -->
                        <table class="digest-topic popular-topic with-dir" style="width:100%">
                          <tbody>
                            <tr>
                              <td class="digest-topic-category with-dir" style="margin:0;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;vertical-align:top;">
                                <p style="color:#8f8f8f;line-height:1.3;margin: 20px 0 0 0;">
                                  <%= category_badge(t.category, inline_style: true, absolute_url: true) %>
                                </p>
                              </td>
                              <td class="with-dir" style="margin:0;padding:<%= rtl? ? '0 0 0 16px' : '0 16px 0 0' %>;text-align:<%= rtl? ? 'left' : 'right' %>;vertical-align:top;">
                                <p class="text-right digest-created-at" style="color:#8f8f8f;line-height:1.3;margin:20px 0 0 0;font-weight:400;">
                                  <%= short_date(t.created_at) %>
                                </p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <table class="digest-topic-title-wrapper with-dir" style="vertical-align:top;width:100%">
                          <tbody>
                            <tr>
                              <td class="with-dir" style="padding:<%= rtl? ? '0 16px 8px 8px' : '0 8px 8px 16px' %>;width:100%;">
                                <h2 class="digest-topic-title" style="font-size:18px;font-weight:400;line-height:1.3;margin:0;padding:0;word-wrap:normal">
                                  <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none">
                                    <strong><%= gsub_emoji_to_unicode(t.title.truncate(100, separator: /\s/)) -%></strong>
                                  </a>
                                </h2>
                                <%- if SiteSetting.show_topic_featured_link_in_digest && t.featured_link %>
                                  <a class='topic-featured-link' href='<%= t.featured_link %>'><%= raw topic_featured_link_domain(t.featured_link) %></a>
                                <%- end %>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <table class="digest-topic-title-wrapper with-dir" style="padding:0;position:relative;vertical-align:top;width:100%">
                          <tbody>
                            <tr>
                              <td class="digest-topic-op" style="color:#0a0a0a;line-height:1.3;margin:0 auto;padding:<%= rtl? ? '0 16px 0 0' : '0 0 0 16px' %>;width:50px;vertical-align:top;">
                                <img src="<%= t.user.small_avatar_url -%>" style="border-radius:50%;clear:both;display:block;float:none;height:50px;width:50px;margin:0;max-width:100%;outline:0;text-align:center;text-decoration:none;" align="center" alt="<%= t.user.username -%>">
                              </td>
                              <td style="color:#0a0a0a;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;vertical-align:top;">
                                <% if t.user %>
                                  <% if SiteSetting.enable_names? && t.user.name.present? && t.user.name.downcase != t.user.username.downcase %>
                                    <h6 class="digest-topic-username" style="color:inherit;line-height:1.3;margin:0;padding:0;font-weight: normal;font-size:16px;"><%= t.user.name -%></h6>
                                  <% end %>
                                  <p class="digest-topic-name" style="color:inherit;font-size:14px;font-weight:400;line-height:1.3;margin:0 0 8px 0;padding:0;word-wrap:normal;"><%= t.user.username -%></p>
                                <% end %>
                              </td>
                              <%- if show_image_with_url(t.image_url) && t.featured_link.nil? && !(@excerpts[t.first_post&.id]||"").include?(t.image_url) -%>
                                <td style="margin:0;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;vertical-align:top;" align="right">
                                  <img src="<%= url_for_email(t.image_url) -%>" height="64" style="margin:auto;max-height:64px;max-width:100%;outline:0;text-decoration:none;" alt="topic image">
                                </td>
                              <%- end -%>
                            </tr>
                          </tbody>
                        </table>
                        <%- if t.first_post.present? && !t.first_post.user_deleted %>
                          <table class="digest-topic-body with-dir" style="border-bottom:1px solid #f3f3f3;mso-border-bottom-alt:none;padding:0;vertical-align:top;width:100%;">
                            <tbody>
                              <tr>
                                <td class="post-excerpt" style="color:#0a0a0a;font-size:14px;padding:0 16px 0 16px;width:100%;font-weight:normal;mso-padding-alt: 16px;">
                                  <%= @excerpts[t.first_post.id] %>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        <%- end %>
                        <table class="digest-topic-stats with-dir" style="padding:0;vertical-align:top;width:100%; padding-top:20px;">
                          <tbody>
                            <tr>
                              <td class="digest-topic-stat" style="padding:<%= rtl? ? '0 16px 16px 8px' : '0 8px 16px 16px' %>;white-space:nowrap;vertical-align:top;width:75px">
                                <img class="digest-icon" src="<%= email_image_url 'heart_lightdark.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="likes">
                                <span style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;">&nbsp;<%= t.like_count -%></span>
                              </td>
                              <td class="digest-topic-stat" style="padding:0 8px 16px 8px;white-space:nowrap;vertical-align:top;width:75px">
                                <img class="digest-icon" src="<%= email_image_url 'comment_lightdark.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="replies">
                                <span style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;">&nbsp;<%= t.posts_count - 1 -%></span>
                              </td>
                              <td class="digest-read-more-wrap" style="line-height:1.3;padding:<%= rtl? ? '0 8px 0 16px' : '0 16px 0 8px' %>;text-align:<%= rtl? ? 'left' : 'right' %>;white-space:nowrap;vertical-align:top;">
                                <span class="with_accent-colors mso-accent-link">
                                  <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" class="digest-button with-accent-colors" style="width:100%;text-decoration:none;padding:8px 16px;white-space:nowrap;">
                                    <%=t 'user_notifications.digest.join_the_discussion' %>
                                  </a>
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <div style="background-color:#f3f3f3;">
                          <table class="spacer with-dir" style="padding:0;width:100%;background-color:#f3f3f3">
                            <tbody><tr><td height="20px" style="border-collapse:collapse!important;line-height:20px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr></tbody>
                          </table>
                        </div>
                        <!--   End of Popular Topic   -->

                        <% if i < 5 %>
                        <%= digest_custom_html("below_post_#{i+1}") %>
                        <% end %>

                      <% end %>

                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
            <td class="side-spacer" style="vertical-align:top;padding:0;">
              <!-- Background that goes down part-way behind content -->
              <div class="with-accent-colors">
                <table class="spacer with-dir with-accent-colors" style="border-spacing:0;padding:0;width:100%">
                  <tbody>
                    <tr>
                      <td height="400px" style="height:400px;border-collapse:collapse!important;margin:0;mso-line-height-rule:exactly;padding:0;">&nbsp;</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </td>
          </tr>
        </table>
        <% if @popular_posts.present? %>
     
          <center class="header-popular-posts" style="color:#0a0a0a;background:#f3f3f3;font-size:22px;font-weight:400;padding: 20px 0;font-family:Arial,sans-serif;">
            <%=t 'user_notifications.digest.popular_posts' %>
          </center>
      
          <table width="100%" class="body with-dir" style="background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;vertical-align:top;">
            <tr>
              <td class="side-spacer" style="padding:0;">&nbsp;</td>
              <td class="with-dir" width="650" align="center" valign="top" style="border-collapse:collapse!important;line-height:1.3;margin:0;padding:0;vertical-align:top;">

                <% @popular_posts.each do |post| %>

                  <!--   Beginning of Popular Post   -->
                  <table class="popular-post-excerpt with-dir" style="width:100%;background:#fefefe;border-spacing:0;padding:0;vertical-align:top;">
                    <tbody>
                      <tr>
                        <td class="post-excerpt with-dir" style="color:#0a0a0a;font-size:14px;font-weight:normal;padding:16px;width:100%;">
                          <%= email_excerpt(post.cooked, post) %>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table class="popular-post-spacer with-dir" style="border-spacing:0;background-color:#f3f3f3;padding:0;vertical-align:top;width:100%">
                    <tbody>
                      <tr>
                        <td style="border-spacing:0;padding:0;color:#0a0a0a;line-height:1.3;padding:<%= rtl? ? '0 65px 0 0' : '0 0 0 65px' %>;">
                          <div style="width: 0;height: 0;border-top: 30px solid #fefefe;border-right: 30px solid transparent;" dm="triangle"></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table class="popular-post-meta with-dir" style="background-color:#f3f3f3;padding:0;position:relative;vertical-align:top;width:100%">
                    <tbody>
                      <tr>
                        <td style="padding:0 8px 8px 8px;width:50px;vertical-align:top;">
                          <img src="<%= post.user.small_avatar_url -%>" style="border-radius:50%;clear:both;display:block;height:50px;width:50px;outline:0;" alt="<%= post.user.username -%>">
                        </td>
                        <td style="color:#0a0a0a;line-height:1.3;padding:0 8px 8px 8px;vertical-align:top;">
                          <% if post.user %>
                            <% if SiteSetting.enable_names? && post.user.name && post.user.name.downcase != post.user.username.downcase %>
                              <h6 style="color:inherit;line-height:1.3;margin:0;padding:0;font-weight: normal;font-size:16px;"><%= post.user.name -%></h6>
                            <% end %>
                            <p style="color:inherit;font-size:14px;font-weight:400;line-height:1.3;margin:0 0 8px 0;padding:0;word-wrap:normal;"><%= post.user.username -%></p>
                          <% end %>
                        </td>
                        <td style="color:#0a0a0a;line-height:1.3;padding:0 8px 8px 8px;text-align:<%= rtl? ? 'left' : 'right' %>;">
                          <p style="color:#8f8f8f;line-height:1.3;margin:0 0 10px 0;padding:0;">
                            <a href="<%= post.full_url -%>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none"><%= gsub_emoji_to_unicode(post.topic.title.truncate(100, separator: /\s/)) -%></a>
                          </p>
                          <a href="<%= post.full_url -%>" class="digest-button with-accent-colors" style="width:100%;text-decoration:none;padding:8px 16px;white-space: nowrap;">
                            <%=t 'user_notifications.digest.join_the_discussion' %>
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <div style="background-color:#f3f3f3">
                    <table class="spacer with-dir" style="padding:0;vertical-align:top;width:100%;background-color:#f3f3f3">
                      <tbody><tr><td height="40" style="-moz-hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse!important;color:#0a0a0a;font-size:40px;font-weight:400;hyphens:auto;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;vertical-align:top;word-wrap:normal">&#xA0;</td></tr></tbody>
                    </table>
                  </div>
                  <!--   End of Popular Post   -->

                <% end %>

              </td>
              <td class="side-spacer" style="padding:0;">&nbsp;</td>
            </tr>
          </table>
        <% end %>

        <%= digest_custom_html("above_popular_topics") %>

        <% if @other_new_for_you.present? %>
         
          <center class="digest-new-header" style="color:#0a0a0a;background:#f3f3f3;font-size:22px;font-weight:400;padding-bottom: 8px;font-family:Arial,sans-serif;mso-line-height-rule:exactly;line-height:36px;"><%=t 'user_notifications.digest.more_new' %></center>
         
          <table width="100%" class="digest-new-topics body with-dir" style="background:#f3f3f3;border-spacing:0;border-collapse:collapse!important;font-family:Arial,sans-serif;font-size:14px;font-weight:200;line-height:1.3;padding:0;vertical-align:top;">
            <tr>
              <td class="side-spacer" style="padding:0;">&nbsp;</td>
              <td width="650" align="center" valign="top" style="border-collapse:collapse!important;margin:0;padding:0;">

                <table class="digest-new-topic with-dir" style="padding:0;vertical-align:top;width:100%">
                  <tbody>

                    <% @other_new_for_you.each do |t| %>

                      <!--   Begin new topic  -->
                      <tr style="vertical-align:top;">
                        <td class="digest-new-topic-title with-dir" style="padding:8px;">
                          <a href="<%= Discourse.base_url_no_prefix + t.relative_url %>" style="font-weight:400;line-height:1.3;margin:0;padding:0;text-decoration:none;">
                            <strong><%= gsub_emoji_to_unicode(t.title.truncate(100, separator: /\s/)) -%></strong>
                          </a>
                          <%- if SiteSetting.show_topic_featured_link_in_digest && t.featured_link %>
                            <a class='topic-featured-link' href='<%= t.featured_link %>'><%= raw topic_featured_link_domain(t.featured_link) %></a>
                          <%- end %>
                          <p class="digest-new-topic-category" style="color:#0a0a0a;line-height:1.3;margin:0 0 10px 0;padding:0;">
                            <%= category_badge(t.category, inline_style: true, absolute_url: true) %>
                          </p>
                        </td>
                        <td class="digest-new-topic-stat with-dir" style="padding:8px;">
                          <img class="digest-icon" src="<%= email_image_url 'heart_lightdark.png' -%>" style="clear:both;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="likes">
                          <p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;"><%= t.like_count -%></p>
                        </td>
                        <td class="digest-new-topic-stat digest-replies with-dir" style="padding:8px;">
                          <img class="digest-icon" src="<%= email_image_url 'comment_lightdark.png' -%>" style="clear:none;display:inline-block;float:<%= rtl? ? 'right' : 'left' %>;height:20px;width:20px;margin:0;max-width:100%;outline:0;text-decoration:none;" alt="replies">
                          <p style="color:#8f8f8f;float:<%= rtl? ? 'right' : 'left' %>;line-height:1.3;margin:0 5px 10px 5px;padding:0;font-weight:400;"><%= t.posts_count - 1 -%></p>
                        </td>
                      </tr>

                      <tr class="digest-new-topic-spacer"><td colspan="6" height="10px" style="border-collapse:collapse!important;line-height:10px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr>
                      <!--   End new topic  -->

                    <% end %>

                  </tbody>
                </table>

              </td>
              <td class="side-spacer" style="padding:0;">&nbsp;</td>
            </tr>
          </table>

        <% end %>

        <%= digest_custom_html("below_popular_topics") %>

        <style>
          @media only screen {
            html {
              min-height: 100%;
              background: #f3f3f3
            }
          }

          @media only screen and (max-width:900px) {
            table.body img {
              width: auto;
              height: auto
            }
            table.body center {
              min-width: 0!important;
            }
            table.body .side-spacer {
              width: 2.5%!important;
            }
            table.body .column,
            table.body .columns {
              height: auto!important;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              padding-left: 16px!important;
              padding-right: 16px!important
            }
            table.body .column .column,
            table.body .column .columns,
            table.body .columns .column,
            table.body .columns .columns {
              padding-left: 0!important;
              padding-right: 0!important
            }
          }
        </style>

        <%= digest_custom_html("above_footer") %>

        <table width="100%" class='summary-footer with-dir'>
          <tr>
            <td></td>
            <td width="650" align="center">
              <%=raw(t 'user_notifications.digest.unsubscribe',
                      site_link: html_site_link,
                      email_preferences_link: link_to(t('user_notifications.digest.your_email_settings'), Discourse.base_url + '/my/preferences/emails'),
                      unsubscribe_link: link_to(t('user_notifications.digest.click_here'), "#{Discourse.base_url}/email/unsubscribe/#{@unsubscribe_key}"))  %>
            </td>
            <td></td>
          </tr>
        </table>

        <%= digest_custom_html("below_footer") %>
      </td>
      <td></td>
    </tr>
  </table>
</div>
